<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con-wrap {
            width: 385px;
            height: 90px;
            /* border: 1px solid red; */
            margin: 50px auto;
        }
        
        .con-wrap div {
            float: left;
            width: 62px;
            height: 85px;
            border: 1px solid #04E38A;
            font-size: 34px;
            font-weight: 700;
            line-height: 85px;
            text-align: center;
            color: #04E38A;
            margin-right: 5px;
            overflow: hidden;
        }
        
        .con-wrap div span {
            width: 62px;
            height: 85px;
            display: block;
        }
        
        @keyframes moveNum1 {
            0% {}
            100% {
                transform: translateY(-85px);
            }
        }
        
        @keyframes moveNum2 {
            0% {}
            100% {
                transform: translateY(-170px);
            }
        }
    </style>
</head>

<body>
    <div class="con-wrap">
        <div class="num1">
            <span>4</span>
        </div>
        <div class="num2">
            <span>8</span>
        </div>
        <div class="num3">
            <span>7</span>
        </div>
        <div class="num4">
            <span>3</span>
        </div>
        <div class="num5">
            <span>0</span>
        </div>
    </div>
    <script>
        var num5 = document.querySelector('.num5');
        var num = 0;
        // 定时器 间歇定时器
        setInterval(function() {
            var spanOld = document.querySelectorAll('.num5 span');
            if (spanOld.length > 1) {
                // 移除节点
                spanOld[0].remove();
            }
            num++;
            if (num > 9) {
                // 增加span的元素
                var addSpan = document.createElement('span');
                addSpan.innerText = num;
                m
                // 增加到页面上
                num5.appendChild(addSpan);
                // 获取所有的span元素
                var spans = document.querySelectorAll('.num5 span');
                spans[0].style.animation = 'moveNum2 1s forwards';
                spans[1].style.animation = 'moveNum1 1s forwards';

            }
        });
    </script>
</body>

</html>